<template>

    <div>
        <el-form :inline="true" :model="query" class="query-form" size="mini">
            <el-form-item class="query-form-item" label="审批状态">
                <el-select v-model="query.status" placeholder="请选择审批状态">
                    <el-option label="已审批" value="1">
                    </el-option>
                    <el-option label="未审批" value="0">
                    </el-option>
                    <el-option label="审批拒绝" value="2">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item class="query-form-item" label="申请日期">
                <el-date-picker
                    v-model="query.applyTime"
                    type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:59']"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button-group>
                    <el-button type="primary" icon="el-icon-refresh" @click="onReset"></el-button>
                    <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
                </el-button-group>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="list" style="width: 100%;">
<!--            <el-table-column label="ID" prop="id" width="200" fixed>-->
<!--            </el-table-column>-->
            <el-table-column label="用户id" prop="id" width="200" fixed>
                <template slot-scope="scope">
                    {{ scope.row.accountId }}
                </template>
            </el-table-column>
            <el-table-column label="申请人手机号码" prop="userId" :show-overflow-tooltip="true" fixed>
                <template slot-scope="scope">
                    {{ scope.row.userName }}
                </template>
            </el-table-column>
            <el-table-column label="申请人" prop="userId" :show-overflow-tooltip="true" fixed>
                <template slot-scope="scope">
                    {{ scope.row.realName }}
                </template>
            </el-table-column>
            <el-table-column label="申请时间" prop="createTime" with="300" :show-overflow-tooltip="true" fixed>
                <template slot-scope="scope">
                    {{ (scope.row.createTime||'').substring(5) }}
                </template>
            </el-table-column>
            <el-table-column label="审批时间" prop="createTime" with="300" :show-overflow-tooltip="true" fixed>
                <template slot-scope="scope">
                    {{ (scope.row.updateTime || '').substring(5) }}
                </template>
            </el-table-column>
            <el-table-column label="提现金额" prop="amount" with="100" :show-overflow-tooltip="true" fixed>
                <template slot-scope="scope">
                    {{ scope.row.amount + '元' }}
                </template>
            </el-table-column>
            <el-table-column label="手续费" prop="amount" with="100" :show-overflow-tooltip="true" fixed>
                <template slot-scope="scope">
                    {{ scope.row.fee + '元' }}
                </template>
            </el-table-column>
            <el-table-column label="实际到账金额" prop="amount" with="100" :show-overflow-tooltip="true" fixed>
                <template slot-scope="scope">
                    {{ (scope.row.amount - (scope.row.fee||0)) + '元' }}
                </template>
            </el-table-column>
            <el-table-column label="提现方式" prop="accountType" with="100" :show-overflow-tooltip="true" fixed>
                <template slot-scope="scope">
                    {{ scope.row.accountType || '支付宝' }}
                </template>
            </el-table-column>
            <!-- <el-table-column
                label="提现账户"
                prop="account"
                with="300"
                :show-overflow-tooltip="true"
                fixed>
            </el-table-column> -->
            <el-table-column label="审核结果" prop="status" :show-overflow-tooltip="true" fixed>
                <template slot-scope="scope">
                    {{ scope.row.status == 1 ? '已通过' : scope.row.status == 0 ? '未通过' : '拒绝' }}
                </template>
            </el-table-column>
            <el-table-column label="提现结果" prop="res" :show-overflow-tooltip="true" fixed>
                <template slot-scope="scope">
                    {{ scope.row.res == 1 ? '已提现' : scope.row.status == 1 ? '提现失败' : '未提现' }}
                </template>
            </el-table-column>
            <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" fixed>
                <template slot-scope="scope">
                    {{ scope.row.remark }}
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click.native="goApply(scope.row)">审批</el-button>
                    <!--                    <el-button type="text" size="small"-->
                    <!--                               @click.native="handleDel(scope.$index, scope.row)">详情</el-button>-->
                </template>
            </el-table-column>
        </el-table>

        <el-pagination :page-size="query.limit" @current-change="handleCurrentChange" layout="prev, pager, next"
            :total="total">
        </el-pagination>

        <!--表单-->
        <el-dialog :title="formMap[formName]" :visible.sync="formVisible" :before-close="hideForm" width="450px"
            top="5vh">
            <el-form label-position="left" label-width="80px" :model="formData" :rules="formRules" ref="dataForm">

                <el-form-item label="提现账户" prop="remark">
                    <el-image v-if="selectRow.accountType && selectRow.accountType == '微信'"
                    :preview-src-list="[selectRow.account]"
                        style="width: 100px; height: 100px" :src="selectRow.account" :fit="'fill'"></el-image>
                    <el-input v-else disable :value="selectRow.account" show-word-limit maxlength="200"
                        auto-complete="off"></el-input>

                </el-form-item>
                <el-form-item label="提现金额" prop="remark">
                    <el-input disable :value="selectRow.amount" show-word-limit maxlength="200"
                              auto-complete="off"></el-input>

                </el-form-item>
                <el-form-item label="手续费" prop="remark">
                    <el-input disable :value="selectRow.fee"  show-word-limit maxlength="200"
                              auto-complete="off"></el-input>

                </el-form-item>
                <el-form-item label="实际到账" prop="remark">
                    <el-input disable :value="selectRow.amount - (selectRow.fee || 0 )"  show-word-limit maxlength="200"
                              auto-complete="off"></el-input>

                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="formData.remark" type="textarea" show-word-limit maxlength="200"
                        auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="hideForm" style="position: absolute;left: 20px;">取消</el-button>
                <el-popconfirm style="margin: 0 10px" title="确认要拒绝该提现申请吗吗？" @confirm="formSubmit(2)">
                    <el-button type="warning" slot="reference">拒绝</el-button>
                </el-popconfirm>

                <el-popconfirm style="margin: 0 10px" title="确认通过该提现申请吗？" @confirm="formSubmit(1)">
                    <el-button type="primary" slot="reference" :loading="formLoading">通过</el-button>

                </el-popconfirm>

            </div>
        </el-dialog>


        <el-dialog title="订单对话" :visible.sync="chatDialog" width="90%" :before-close="() => {
            chatDialog = false
        }">
            <order-chat :order-id="selectRow.id"></order-chat>
            <span slot="footer" class="dialog-footer">
                <el-button @click="() => {
            chatDialog = false
        }">关 闭</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
import { list, pass } from "../../api/dnf/extra";
import Upload from "../../components/File/Upload.vue";
import OrderChat from "./OrderChat.vue";
import { goldSave } from "@/api/dnf/gold";
import {parseTime} from "@/filtres";
const formJson = {
    id: "",
    auction: "",
    gameServer: "",
    price: "",
    charge: "",
    amount: "",
    type: "3",
    remark: "",
    platform: "自营"
};
export default {
    data() {
        return {
            statusMap: {
                '0': '未发货',
                '1': '订单完成',
                '2': '订单取消',
                '3': '卖家已接单',
                '4': '订单删除',
                '5': '卖家已发货'
            },
            selectRow: {},
            chatDialog: false,
            options: [
            ],
            query: {
                applyTime:  [
                    parseTime(new Date(),'{y}-{m}-{d} 00:00:00'),
                    parseTime(new Date(),'{y}-{m}-{d} 23:59:59')
                ],
                title: "",
                page: 1,
                limit: 10
            },
            channelListInput: "",
            androidVersionListInput: "",
            iosVersionListInput: "",
            list: [],
            total: 0,
            loading: true,
            index: null,
            formName: null,
            formMap: {
                add: "新增",
                edit: "编辑"
            },
            formLoading: false,
            formVisible: false,
            formData: formJson,
            formRules: {
                auction: [
                    {
                        required: true,
                        message: "请输入拍卖方式",
                        trigger: "blur"
                    }
                ],
                gameServer: [
                    {
                        required: true,
                        message: "请输入游戏区服",
                        trigger: "blur"
                    }
                ],
                price: [
                    {
                        required: true,
                        message: "请输入销售价",
                        trigger: "blur"
                    }
                ],
                charge: [
                    {
                        required: true,
                        message: "请输入手续费",
                        trigger: "blur"
                    }
                ],
                amount: [
                    {
                        required: true,
                        message: "请输入数量",
                        trigger: "blur"
                    }
                ],
                platform: [
                    {
                        required: true,
                        message: "请输入平台",
                        trigger: "blur"
                    }
                ],
            },
            deleteLoading: false
        };
    },
    components: {
        Upload,
        OrderChat
    },
    methods: {
        onReset() {
            this.$router.push({
                path: ""
            });
            this.query = {
                title: "",
                page: 1,
                limit: 10
            };
            this.getList();
        },
        onSubmit() {
            this.$router.push({
                path: "",
                query: this.query
            });
            this.getList();
        },
        handleSizeChange(val) {
            this.query.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.query.page = val;
            this.getList();
        },
        getList() {
            this.loading = true;
            list({
                ...this.query,
                status: this.status
            })
                .then(response => {
                    this.loading = false;
                    this.list = response.data.records || [];
                    this.total = response.data.total || 0;
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },
        // 删除渠道
        handleChannelListClose(index) {
            console.log(index);
            // 更改值
            this.formData.channelList.splice(index, 1);
        },
        // 添加渠道白名单
        handleChannelListSubmit() {
            // 更改值
            if (
                this.channelListInput &&
                this.formData.channelList.length < 15
            ) {
                let arr = this.channelListInput.split(",");
                for (let i in arr) {
                    if (
                        arr[i] !== "" &&
                        (this.formData.channelList.length === 0 ||
                            this.formData.channelList.indexOf(arr[i]) < 0)
                    ) {
                        this.formData.channelList.push(arr[i]);
                    }
                }
                this.channelListInput = "";
                this.$refs.channelListRef.focus();
            }
        },
        // 刷新表单
        resetForm() {
            if (this.$refs["dataForm"]) {
                // 清空字段
                this.$refs["dataForm"].resetFields();
                // 清空验证信息表单
                this.$refs["dataForm"].clearValidate();
            }
        },
        formSubmit(status) {
            pass({ ...this.selectRow, status: status })
                .then(response => {
                    this.formLoading = false;
                    if (response.code) {
                        this.$message.error(response.message);
                        return false;
                    }
                    this.$message.success("操作成功");
                    this.formVisible = false;
                    this.getList();
                    // if (this.formName === "add") {
                    //     // 向头部添加数据
                    //     data.adId = response.data.adId;
                    //     this.list.unshift(data);
                    // } else {
                    //     this.list.splice(this.index, 1, data);
                    // }
                })
                .catch(() => {
                    this.formLoading = false;
                });
        },
        // 隐藏表单
        hideForm() {
            // 更改值
            this.formVisible = !this.formVisible;
            return true;
        },
        goApply(row) {
            if (row.status == 2) {
                this.$message.error("该审批已拒绝，不可再次审批");
                return;
            }
            // if (row.status == 1){
            //     this.$message.error("该审批已通过，不可再次审批");
            //     return ;
            // }
            this.formVisible = true;
            this.formData.remark = '';
            this.selectRow = row
        },
        // 显示表单
        onSelectPic(filePath, filePathUrl) {
            this.formData.pic = filePath;
            this.formData.picUrl = filePathUrl;
        }
    },
    filters: {
        statusFilterType(status) {
            const statusMap = {
                0: "gray",
                1: "success"
            };
            return statusMap[status];
        },
        statusFilterName(status) {
            const statusMap = {
                0: "禁用",
                1: "正常"
            };
            return statusMap[status];
        }
    },
    mounted() { },
    created() {
        // 将参数拷贝进查询对象
        let query = this.$route.query;
        this.query = Object.assign(this.query, query);
        this.query.limit = parseInt(this.query.limit);
        // 加载表格数据
        this.getList();
    }
};
</script>

<style type="text/scss" lang="scss"></style>
